<template>
	<view class="">
		<u-upload :deletable="deletable" :limitType="limitType" :action="action" :form-data="formData" :file-list="fileList" :max-count="maxCount"
			@on-success="onSuccess" @on-error="onError" :before-upload="beforeUpload" @on-remove="onRemove" @on-uploaded="onUploaded" ref="gUploadimgRef"></u-upload>
	</view>
</template>

<script setup>
	import mixinUpload from '@/common/js/mixinUpload.js';
	const {
		getObjName,
		uploadFileHost
	} = mixinUpload();
	import {
		ref,
		reactive,
		computed,
		watch,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl
	} = proxy
	const props = defineProps({
		modelValue: {
			type: [String, Array],
			default: '',
		},
		maxCount: {
			type: Number,
			default: 9,
		},
		limitType: {
			type: Array,
			default: ['png', 'jpg', 'jpeg', 'webp', 'gif'],
		},
		deletable:{
			type: Boolean,
			default: true,
		}
	})
	const emit = defineEmits(['update:modelValue']);
	const gUploadimgRef = ref();
	// const action = ref('');
	const action = uploadFileHost;
	
	const formData = reactive({});
	const fileList = reactive([]);
	// {
	// 	url: 'xxx.png', // 预览图片的地址
	// 	error: false, // 上传失败，此值为true
	// 	progress: 100, // 0-100之间的值
	// }
	const beforeUpload = async (index, list) => {
		return true
		// console.log(index);
		try {
			let {
				data
			} = await proxy.$u.api.commonGetOssPolicy();
			// #ifdef H5
			let fileName = list[index].file.name;
			// #endif
			// #ifdef MP-WEIXIN
			let path = list[index].file.path.split('/')
			let fileName = path[path.length-1];
			// #endif
			// data.dir
			// data.expire	
			let objName = getObjName(data.dir,fileName)
			
			action.value = data.host;
			formData.key = objName
			formData.policy = data.policy;
			formData.OSSAccessKeyId = data.accessid;
			formData.signature = data.signature;
			list[index].shortUrl = objName;
			formData.success_action_status = '200';
			return true
		} catch (e) {
			return false
		}
	}
	const onSuccess = (data, index, lists, name) => {
		if(typeof data == 'string'){
			data = JSON.parse(data)
		}
		if(data.code == 200){
			let img = data.data;
			lists[index].shortUrl = img.url;
		}else{
			lists[index].error = true;
		}
		// console.log('onSuccess');
		// console.log('data', data);
		// console.log('index', index);
		// console.log('lists', lists);
		// console.log('name', name);

	}
	const onError = (res, index, lists, name) => {
		// console.log('onError');
		// console.log('res', res);
		// console.log('index', index);
		// console.log('lists', lists);
		// console.log('name', name);
	}
	const onRemove = (index, lists) => {
		// console.log('onRemove');
		let urls = props.modelValue.filter((v,i)=>i != index)
		emit('update:modelValue', urls);
		updateFileList();
	}
	const onUploaded = (lists, name) => {
		// console.log('onUploaded');
		// console.log('lists', lists);
		// console.log('name', name);
		let url = '';
		let urls = [];
		let errLength = 0;
		lists.forEach(v=>{
			if(!v.error){
				urls.push(v.shortUrl);
			}else{
				errLength++
			}
		})
		emit('update:modelValue', urls);
		if(errLength>0){
			uni.$u.toast(`有${errLength}图上传失败，请重试`);
		}
		// console.log(urls);
		// console.log('onUploaded');
		// console.log('lists', lists);
		// console.log('name', name);
	}

	onMounted(() => {
		updateFileList();
	})
	const updateFileList = ()=>{
		let newValue = props.modelValue;
		if(newValue){
			fileList.splice(0, fileList.length);
			newValue.forEach(v=>{
				fileList.push({
					url:baseImgUrl+v,
					shortUrl:v
				})
			})
			gUploadimgRef.value.lists = fileList
		}
	}
	watch(
		() => props.modelValue,
		newValue => {
			// console.log(props.modelValue)
			updateFileList()
		}
	);

	
	// emit('update:modelValue', arr);
</script>

<style lang="scss" scoped>

</style>